<template>
	<view class="describe">
		<view class="title">{{ title }}</view>
		<view class="desc" style="color: #767a82;">{{ desc }}</view>
		<view class="content">
			<uv-textarea
				v-model="value"
				height="600"
				maxlength="500"
				border="none"
				placeholder="请输入内容"
				:textStyle="{ fontSize: '16px', lineHeight: '26px', color: '#303133' }"
				:customStyle="{ padding: '0px' }"
			></uv-textarea>
		</view>
		<view class="count">{{ length }}/{{ count }}</view>
		<view class="confirm" @click="handleSubmit"><button>保存</button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '',
			desc: '',
			value: '',
			count: 500
		};
	},
	onLoad: function(option) {
		const info = JSON.parse(decodeURIComponent(option.info));
		this.title = info.title;
		this.desc = info.desc;
		this.value = info.value;
	},
	computed: {
		length() {
			return this.value.length;
		}
	},
	methods: {
		// 保存
		handleSubmit() {
			uni.$emit('describe:value', { title: this.title, content: this.value });
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
</style>

<style lang="scss" scoped>
.describe {
	padding: 30rpx;
	.title {
		font-size: 38rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
	}
	.content {
		margin: 20rpx 0;
	}
	.count {
		text-align: right;
		font-size: 32rpx;
	}
	.confirm {
		position: fixed;
		bottom: 30rpx;
		left: 0;
		width: 100%;
		padding: 0 30rpx;
		button {
			height: 40px;
			line-height: 40px;
			padding: 0 12px;
			border-radius: 10rpx;
			color: #fff;
			background-color: $main-color;
		}
	}
}
</style>
